<template>
	<view class="content">
		<canvas style="display:block;margin:0 auto;width: 320px; height: 320px;background-color: #DFDFDF;" canvas-id="myCanvas"></canvas>
		<button type="primary" @tap="draw">绘制</button>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				windowWidth: 0,
				windowHeight: 0
			}
		},
		onLoad() {
			
		},
		components: {
			
		},
		methods: {
			draw(){
				this.isBarHeight999().then((res) => {
					this.windowWidth = res.windowWidth;
					this.windowHeight = res.windowHeight;
				})
				const ctx = uni.createCanvasContext('myCanvas')
				
				ctx.setFontSize(20);
				ctx.setTextAlign('center');
				ctx.fillText('道友圈', 160, 30);
				
				ctx.setFillStyle('white');
				ctx.fillRect(20, 50, 280, 160);
				
				ctx.setFontSize(14);
				ctx.setFillStyle('#A9A9A9');
				ctx.setTextAlign('left');
				ctx.fillText('10月6日晚8点羽毛球场', 30, 80);
				
				ctx.arc(220, 75, 10, 0.5 * Math.PI, 1.5 * Math.PI)
				ctx.setFillStyle('#EC808D');
				ctx.fill();
				
				ctx.fillRect(220, 65, 30, 20);
				
				ctx.setFillStyle('#73C3E6');
				ctx.fillRect(250, 65, 30, 20);
				ctx.draw();
				
				ctx.arc(280, 75, 10, 1.5 * Math.PI, 0.5 * Math.PI);
				ctx.fill()
				
				ctx.setFontSize(9);
				ctx.setFillStyle('black');
				ctx.setTextAlign('left');
				ctx.fillText('男10', 220, 78);
				ctx.fillText('女10', 260, 78);
				
				ctx.setLineDash([10, 5], 2);
				ctx.beginPath();
				ctx.moveTo(20, 100);
				ctx.lineTo(300, 100);
				ctx.stroke();
				
				ctx.setFontSize(12);
				ctx.setFillStyle('#A9A9A9');
				ctx.setTextAlign('left');
				ctx.fillText('项目', 30, 120);
				ctx.fillText('地点', 30, 140);
				ctx.fillText('时间', 30, 160);
				ctx.fillText('人数上限', 30, 180);
				ctx.fillText('发布者', 30, 200);
				
				ctx.setTextAlign('right');
				ctx.fillText('羽毛球', 290, 120);
				ctx.fillText('上海体育场2号口', 290, 140);
				ctx.fillText('10月6日晚8点', 290, 160);
				ctx.fillText('12人', 290, 180);
				ctx.fillText('超级无敌小垃圾', 290, 200);
				
				ctx.setFontSize(17);
				ctx.setFillStyle('black');
				ctx.setTextAlign('left');
				ctx.fillText('在道友圈', 20, 250);
				ctx.fillText('认识新的自己', 20, 270);
				ctx.fillText('New friend, New life', 20, 290);
				
				ctx.draw(true)
				
				ctx.setFillStyle('#73C3E6');
				ctx.arc(260, 250, 30, 0, 2 * Math.PI)
				ctx.fill()
				
				ctx.save();
				ctx.beginPath();
				ctx.arc(260, 250, 30, 0, 2 * Math.PI);
				ctx.clip();
				ctx.drawImage('../../../../static/qrcode.jpg', 230, 220, 60, 60);
				ctx .restore();
				ctx.draw(true);
				
				ctx.setFontSize(13);
				ctx.setFillStyle('black');
				ctx.setTextAlign('left');
				ctx.fillText('长按识别小程序码', 210, 295);
				ctx.draw(true);
				
				// this.draw2()
			},
			draw2(){
				const ctx = uni.createCanvasContext('myCanvas')
				ctx.drawImage('../../../../static/temp/share.jpg', 0, 0, 320, 250);
				ctx.setFontSize(14);
				ctx.setFillStyle('red');
				ctx.setTextAlign('left');
				ctx.fillText('10月6日晚8点羽毛球场', 10, 220);
				ctx.fillText('上海体育场2号口', 10, 240);
				ctx.setTextAlign('center');
				ctx.fillText('在道友圈,认识不一样的自己', 160, 20);
				ctx.draw();
			}
		}
	}
</script>

<style>
	
</style>